<template>
	<view class="input-phone">
		<view class="phone">
			<view class="label"> +86 </view>
			<view class="value">
				<input type="number" class="input" v-model="phone" placeholder="请输入手机号码" placeholder-style="font-size: 16px;font-weight: 400;" />
			</view>
		</view>
		<view class="err-tips" v-if="isTips"> {{ phone.length==0?'手机号不能为空':'请输入正确的手机号' }} </view>
		<view class="btn" @tap="agreeRegister">  {{ pageType == 1 ? '同意协议并注册' : '验证手机号'}} </view>
		<view class="check-box" v-if="pageType == 1">
			<view class="check" :class="isAgree?'checked':''" @tap="agree"> </view>
			<view class="txt"> 我已阅读并同意，<text @tap="goUserAgreement">《用户隐私服务协议》</text> </view>
		</view>
		<Modal ref="modalRef" tips="请勾选我已阅读并同意《用户隐私服务协议》" @confirm="agree" />
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import Modal from '@/components/Modal.vue'
	import { isValidPhone } from '@/utils/valdate.js'
	const props = defineProps(['pageType',])
	const emit = defineEmits(['inputEnd'])
	const modalRef = ref()
	const phone = ref('') // 手机号
	const isAgree = ref(false)
	const isTips = ref(false)
	// 同意协议注册 or 验证手机号
	const agreeRegister = () => {
		if(isValidPhone(phone.value)) {
			if (props.pageType == 1) if (!isAgree.value) return modalRef.value.open()
			emit('inputEnd', {pageNum: 1, phone: phone.value})
			isTips.value = false
		} else {
			isTips.value = true
		}
	}
	// 同意协议
	const agree = () => {
		isAgree.value = !isAgree.value
		modalRef.value.close()
	}
	const goUserAgreement = () => {
		uni.navigateTo({
			url: '/pages/register/userAgreement/userAgreement'
		})
	}
</script>

<style scoped lang="scss">
	.input-phone {
		.phone {
			display: flex;
			margin-top: 25px;
			align-items: center;
			padding-bottom: 12px;
			border-bottom: 1px solid #eeeeee;
			.label {
				font-weight: 400;
				font-size: 16px;
				color: #1E1E2D;
				line-height: 14px;
				margin-right: 10px;
			}
			.value {
				.input {
					color: #CCCCCC;
					font-size: 16px;
					font-weight: 400;
					line-height: 16px
				}
			}
		}
		.err-tips {
			font-weight: 400;
			font-size: 14px;
			color: #FF3B1E;
			line-height: 14px;
			margin-top: 19px;
			margin-left: 40px;
		}
		.btn {
			height: 50px;
			color: #ffffff;
			font-size: 17px;
			margin-top: 50px;
			font-weight: 500;
			line-height: 50px;
			text-align: center;
			background: #FF3B1E;
			border-radius: 106px;
		}
		.check-box {
			display: flex;
			margin-top: 17px;
			align-items: center;
			.check {
				width: 14px;
				height: 14px;
				background: url('/static/icon/login/check.png') no-repeat center center;
				background-size: 100%, 100%;
				&.checked {
					background: url('/static/icon/login/checked.png') no-repeat center center;
					background-size: 100%, 100%;
				}
			}
			.txt {
				color: #999999;
				font-size: 14px;
				font-weight: 400;
				margin-left: 7px;
				line-height: 14px;
				text {
					color: #FF3B1E;
				}
			}
		}
	}
</style>